<template>
  <div id="audios">
    <div class="container">
      <div class="audio-box">
        <div class="audio-container">
          <div class="audio-cover" @click="songDetail">
            <img
              :src="
                $store.state.nowMusic.al
                  ? $store.state.nowMusic.al.picUrl
                  : $store.state.nowMusic.album.picUrl
              "
              alt=""
            />
            <i class="el-icon-full-screen"></i>
          </div>
          <div class="audio-view">
            <h3 class="audio-title">
              {{ $store.state.nowMusic.name }}
              <span>{{
                $store.state.nowMusic.ar
                  ? $store.state.nowMusic.ar[0].name
                  : $store.state.nowMusic.artists[0].name
              }}</span>
            </h3>

            <div class="audio-body">
              <div class="audio-backs">
                <div class="audio-this-time">
                  {{ Math.floor($store.state.nowTime / 60) &lt; 10? '0' + Math.floor($store.state.nowTime / 60):Math.floor($store.state.nowTime/ 60)
                  }}:{{
                    Math.floor($store.state.nowTime  % 60) &lt; 10 ? '0' +(Math.floor($store.state.nowTime % 60)):Math.floor($store.state.nowTime  % 60)
                  }}
                </div>
                <div class="audio-count-time">
                  {{ Math.floor(($store.state.nowMusic.dt?$store.state.nowMusic.dt:$store.state.nowMusic.duration) / 1000 / 60) &lt; 10? '0' + Math.floor(($store.state.nowMusic.dt?$store.state.nowMusic.dt:$store.state.nowMusic.duration) / 1000 / 60):Math.floor(($store.state.nowMusic.dt?$store.state.nowMusic.dt:$store.state.nowMusic.duration) / 1000 / 60)
                  }}:{{
                    Math.floor((($store.state.nowMusic.dt?$store.state.nowMusic.dt:$store.state.nowMusic.duration) / 1000) % 60) &lt; 10 ? '0' +(Math.floor((($store.state.nowMusic.dt?$store.state.nowMusic.dt:$store.state.nowMusic.duration) / 1000) % 60)):Math.floor((($store.state.nowMusic.dt?$store.state.nowMusic.dt:$store.state.nowMusic.duration) / 1000) % 60)
                  }}
                </div>
                <el-slider
                  ref="sliderprogress"
                  v-model="$store.state.progress"
                  class="proecss"
                  @click.native="setProgress"
                ></el-slider>
              </div>
            </div>
            <div class="audio-btn">
              <div class="audio-select">
                <div class="audio-prev" @click="proPlay"></div>
                <div class="audio-play" @click="play"></div>
                <div class="audio-next" @click="nextPlay"></div>
                <div class="audio-menu" @click="showList = !showList"></div>
                <div
                  class="audio-volume"
                  @click="volumeshow = !volumeshow"
                ></div>
              </div>
              <div class="audio-set-volume" v-show="volumeshow">
                <el-slider class="volume-box" v-model="valuevolume" vertical>
                </el-slider>
              </div>
              <div class="audio-list" v-show="showList">
                <div class="audio-list-head">
                  <p>☺随心听</p>
                  <span class="menu-close" @click="showList = !showList"
                    >关闭</span
                  >
                </div>
                <ul class="audio-inline">
                  <li
                    v-for="(item, index) in $store.state.playMusicList"
                    :key="index"
                    @click="playMusic(item)"
                    :class="{ red: item.name === $store.state.nowMusic.name }"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "audios",
  methods: {
    //下一首
    nextPlay() {
      document.getElementsByTagName("audio")[0].currentTime = 0;
      this.$store.state.playMusicList.forEach((item, index, arr) => {
        if (this.$store.state.nowMusic.id === item.id) {
          this.indexn = index;
        }
      });
      this.indexn++;
      if (this.indexn > this.$store.state.playMusicList.length - 1) {
        this.indexn = 0;
      }
      this.$store.state.nowMusic = this.$store.state.playMusicList[this.indexn];

      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/song/url?timetamp=" + new Date().getTime(),
        params: {
          id: this.$store.state.nowMusic.id,
        },
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/song/detail?timetamp=" +
            new Date().getTime(),
          params: {
            ids: this.$store.state.nowMusic.id,
          },
        }).then((res) => {
          console.log("歌曲详情", res.data);

          this.$store.state.nowMusic = res.data.songs[0];

          console.log("仓库现在的音乐", this.$store.state.nowMusic);
        });
        let audioPlay = document.getElementsByTagName("audio")[0];
        audioPlay.setAttribute("src", res.data.data[0].url);
        if (
          audioPlay.paused &&
          document.getElementsByTagName("audio")[0].getAttribute("src")
        ) {
          audioPlay.play();
          document
            .getElementsByClassName("audio-play")[0]
            .classList.add("audio-stop");
        } else {
          audioPlay.pause();
          document
            .getElementsByClassName("audio-play")[0]
            .classList.remove("audio-stop");
        }
      });
      this.axios({
        withCredentials: true,
        method: "get",
        url: "https://music.hzbiz.net/lyric?timetamp=" + new Date().getTime(),
        params: {
          id: this.$store.state.nowMusic.id,
        },
      }).then((res) => {
        this.$store.commit("saveLyric", res.data.lrc.lyric);
        console.log("歌词存储成功");
      });
      //评论获取
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/comment/music?timetamp=" +
          new Date().getTime(),
        params: {
          id: this.$store.state.nowMusic.id,
        },
      }).then((res) => {
        this.$store.commit("saveComment", res.data);
        console.log("歌曲评论储存成功", this.$store.state.songcomment);
      });
    },
    //上一首
    proPlay() {
      document.getElementsByTagName("audio")[0].currentTime = 0;
      this.$store.state.playMusicList.forEach((item, index, arr) => {
        if (this.$store.state.nowMusic.id === item.id) {
          this.indexn = index;
        }
      });
      this.indexn--;
      if (this.indexn < 0) {
        this.indexn = this.$store.state.playMusicList.length - 1;
      }
      this.$store.state.nowMusic = this.$store.state.playMusicList[this.indexn];
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/song/url?timetamp=" + new Date().getTime(),
        params: {
          id: this.$store.state.nowMusic.id,
        },
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/song/detail?timetamp=" +
            new Date().getTime(),
          params: {
            ids: this.$store.state.nowMusic.id,
          },
        }).then((res) => {
          console.log("歌曲详情", res.data);

          this.$store.state.nowMusic = res.data.songs[0];

          console.log("仓库现在的音乐", this.$store.state.nowMusic);
        });
        let audioPlay = document.getElementsByTagName("audio")[0];
        audioPlay.setAttribute("src", res.data.data[0].url);
        if (
          audioPlay.paused &&
          document.getElementsByTagName("audio")[0].getAttribute("src")
        ) {
          audioPlay.play();
          document
            .getElementsByClassName("audio-play")[0]
            .classList.add("audio-stop");
        } else {
          audioPlay.pause();
          document
            .getElementsByClassName("audio-play")[0]
            .classList.remove("audio-stop");
        }
      });

      this.axios({
        withCredentials: true,
        method: "get",
        url: "https://music.hzbiz.net/lyric?timetamp=" + new Date().getTime(),
        params: {
          id: this.$store.state.nowMusic.id,
        },
      }).then((res) => {
        this.$store.commit("saveLyric", res.data.lrc.lyric);
        console.log("歌词存储成功");
      });
      //评论获取
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/comment/music?timetamp=" +
          new Date().getTime(),
        params: {
          id: this.$store.state.nowMusic.id,
        },
      }).then((res) => {
        this.$store.commit("saveComment", res.data);
        console.log("歌曲评论储存成功", this.$store.state.songcomment);
      });
    },
    //请求音乐
    playMusic(item) {
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/song/url?timetamp=" + new Date().getTime(),
        params: {
          id: item.id,
        },
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/song/detail?timetamp=" +
            new Date().getTime(),
          params: {
            ids: item.id,
          },
        }).then((res) => {
          console.log("歌曲详情", res.data);

          this.$store.state.nowMusic = res.data.songs[0];

          console.log("仓库现在的音乐", this.$store.state.nowMusic);
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/lyric?timetamp=" + new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveLyric", res.data.lrc.lyric);
            console.log("歌词存储成功");
          });
          //评论获取
          this.axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/comment/music?timetamp=" +
              new Date().getTime(),
            params: {
              id: this.$store.state.nowMusic.id,
            },
          }).then((res) => {
            this.$store.commit("saveComment", res.data);
            console.log("歌曲评论储存成功", this.$store.state.songcomment);
          });
        });
        // console.log(res.data);
        let aud = document.getElementsByTagName("audio")[0];
        aud.setAttribute("src", res.data.data[0].url);
        aud.play();
      });
    },
    //播放暂停
    play() {
      let audioPlay = document.getElementsByTagName("audio")[0];
      if (
        audioPlay.paused &&
        document.getElementsByTagName("audio")[0].getAttribute("src")
      ) {
        audioPlay.play();
        document
          .getElementsByClassName("audio-play")[0]
          .classList.add("audio-stop");
      } else {
        audioPlay.pause();
        document
          .getElementsByClassName("audio-play")[0]
          .classList.remove("audio-stop");
      }
    },
    //点击更新进度条
    setProgress() {
      this.$store.commit("clickSetProgress");
    },
    //进入歌曲详情页
    songDetail() {
      this.$router.push({ path: "/songdetail" });
    },
  },
  mounted() {
    //自动下一首
    let _this = this;
    function auto() {
      if (
        document.getElementsByTagName("audio")[0].currentTime >
        document.getElementsByTagName("audio")[0].duration - 0.05
      ) {
        _this.$store.state.playMusicList.forEach((item, index, arr) => {
          if (_this.$store.state.nowMusic.id === item.id) {
            _this.indexn = index;
          }
        });
        _this.indexn++;
        if (_this.indexn > _this.$store.state.playMusicList.length - 1) {
          _this.indexn = 0;
        }
        _this.$store.state.nowMusic =
          _this.$store.state.playMusicList[_this.indexn];
        _this
          .axios({
            withCredentials: true,
            method: "get",
            url:
              "https://music.hzbiz.net/song/url?timetamp=" +
              new Date().getTime(),
            params: {
              id: _this.$store.state.nowMusic.id,
            },
          })
          .then((res) => {
            let audioPlay = document.getElementsByTagName("audio")[0];
            audioPlay.setAttribute("src", res.data.data[0].url);
            if (
              audioPlay.paused &&
              document.getElementsByTagName("audio")[0].getAttribute("src")
            ) {
              audioPlay.play();
              document
                .getElementsByClassName("audio-play")[0]
                .classList.add("audio-stop");
            } else {
              audioPlay.pause();
              document
                .getElementsByClassName("audio-play")[0]
                .classList.remove("audio-stop");
            }
          });
      }
    }

    console.log(this.$refs.sliderprogress);
    //实时更新进度条
    this.closeTime = setInterval(() => {
      this.$store.commit("getProgress");
      document.getElementsByTagName("audio")[0].volume = this.valuevolume / 100;
      auto();

      // this.$refs.sliderprogress.style.width = this.$store.state.progress+"%"
    }, 30);
    clerTime();
    //拖拽进度条
    function clerTime() {
      document
        .getElementsByClassName("el-slider__button")[0]
        .addEventListener("mousedown", () => {
          clearInterval(_this.closeTime);
          document.addEventListener("mousemove", function mouse_move() {
            console.log(1);
            clearInterval(_this.closeTime);
            document.addEventListener("mouseup", function mouse_up() {
              clearInterval(_this.closeTime);
              _this.$store.commit("clickSetProgress");
              _this.closeTime = setInterval(() => {
                _this.$store.commit("getProgress");

                // this.$refs.sliderprogress.style.width = this.$store.state.progress+"%"
              }, 30);
              document.removeEventListener("mousemove", mouse_move);
              document.removeEventListener("mouseup", mouse_up);
            });
          });
        });
    }
  },

  data() {
    return {
      showList: false,
      volumeshow: false,
      valuevolume: 100,
      // indexn:0,
    };
  },
};
</script>

<style scoped>
@import url("./style/aud.css");
.audio-inline li.red {
  color: #ec4141;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
<style >
.volume-box .el-slider__runway {
  margin: 0 auto !important;
  margin-top: 10px !important;
}
</style>